<template>
  <div class="app">
    <van-nav-bar title="个人资料" left-text="" left-arrow @click="backlink()" />
    <div class="smooth-curve">
      <div class="avatar">
        <img
          v-if="image != null"
          :src="image"
          alt=""
          @click="this.avatarshow = true"
        />

        <img
          v-if="image == null"
          src="../../../public/user.jpeg"
          @click="this.avatarshow = true"
          alt=""
        />
      </div>
      <van-action-sheet
        v-model:show="avatarshow"
        :actions="avataractions"
        cancel-text="取消"
        close-on-click-action
        @select="onAvatarSelect"
      />
      <input
        type="file"
        ref="inputFile"
        @change="changeImg"
        style="display: none"
      />
    </div>

    <div class="recommend-teacher-box">
      <div class="recommend-teacher-content">
        <van-cell-group inset>
          <van-cell title="昵称" :value="nickname" @click="changenickname" />
          <van-cell
            title="性别"
            :value="gender"
            @click="this.gendershow = true"
          />
          <van-action-sheet
            v-model:show="gendershow"
            :actions="genderactions"
            cancel-text="取消"
            close-on-click-action
            @select="onGenderSelect"
          />

          <van-cell
            title="生日"
            :value="birth"
            @click="this.birthshow = true"
          />
          <van-popup v-model:show="birthshow" position="bottom">
            <van-date-picker
              @confirm="onDayConfirm"
              :min-date="minDate"
              :max-date="maxDate"
              @cancel="birthshow = false"
            />
          </van-popup>

          <van-cell title="地区" :value="city" @click="this.areashow = true" />
          <van-popup v-model:show="areashow" position="bottom">
            <van-area
              :area-list="areaList"
              @confirm="onAreaConfirm"
              @cancel="areashow = false"
            />
          </van-popup>
          <van-cell
            title="简介"
            class="description"
            :value="description"
            @click="changedescription"
          />
        </van-cell-group>
      </div>

      <div class="recommend-teacher-content1">
        <van-cell-group inset>
          <van-cell title="上传证书" is-link />
          <van-cell title="我的二维码" is-link />
        </van-cell-group>
      </div>
    </div>
    <div style="padding-bottom: calc(50px + env(safe-area-inset-bottom))" />
  </div>
</template>

<script>
import { showToast } from "vant";
import { areaList } from "@vant/area-data";
import {
  editgender,
  editbirth,
  editcity,
  userimageedit,
} from "@/http/request.js";
import { useStore } from "@/store/index.js";
export default {
  data() {
    return {
      userid: "",
      image: "",
      nickname: "",
      gender: "",
      birth: "",
      city: "",
      description: "",
      avatarshow: false,
      avataractions: [{ name: "从手机相册选择" }],
      genderactions: [{ name: "男" }, { name: "女" }, { name: "保密" }],
      gendershow: false,
      birthshow: false,
      areashow: false,
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(),
      areaList,
    };
  },
  methods: {
    inituserinfo() {
      const store = useStore();
      const userinfo = store.getUserStoreinfo;
      this.nickname = userinfo.nickname;
      this.gender = userinfo.gender;
      this.birth = userinfo.birth;
      this.userid = userinfo.id;
      this.city = userinfo.city;
      this.image = userinfo.image;
      this.description = userinfo.description;
    },
    onAvatarSelect(value) {
      this.$refs.inputFile.click();
      this.avatarshow = false;
      // showToast(value.name);
    },
    changeImg() {
      const file = this.$refs.inputFile.files[0];
      const formdata = new FormData();
      formdata.append("image", file);
      formdata.append("id", this.userid);
      userimageedit(formdata).then((res) => {
        if (res.code == 0) {
          this.image = res.data.path;
          const store = useStore();
          const userinfo = store.getUserStoreinfo;
          userinfo.image = res.data.path;
          store.setUserinfo(userinfo);
          showToast(res.msg);
        } else {
          showToast(res.msg);
        }
      });
    },

    onGenderSelect(value) {
      var genderid = 0;
      // 2是保密 1是男 0是女
      if (value.name == "男") {
        genderid = 1;
      } else if (value.name == "女") {
        genderid = 0;
      } else {
        genderid = 2;
      }
      editgender({ id: this.userid, gender: genderid }).then((res) => {
        if (res.code == 0) {
          showToast(res.msg);
          this.gender = value.name;
          const store = useStore();
          const userinfo = store.getUserStoreinfo;
          userinfo.gender = value.name;
          store.setUserinfo(userinfo);
        } else {
          showToast(res.msg);
        }
      });
      this.avatarshow = false;
    },
    onDayConfirm(value) {
      this.birth = value.selectedValues.join("/");
      this.birth = this.formatDate(this.birth);
      editbirth({ id: this.userid, birth: this.birth }).then((res) => {
        if (res.code == 0) {
          showToast(res.msg);
          const store = useStore();
          const userinfo = store.getUserStoreinfo;
          userinfo.birth = this.birth;
          store.setUserinfo(userinfo);
        } else {
          showToast(res.msg);
        }
      });
      this.birthshow = false;
    },
    onAreaConfirm(value) {
      this.city = value.selectedOptions.map((item) => item.text).join("/");
      editcity({ id: this.userid, city: this.city }).then((res) => {
        if (res.code == 0) {
          showToast(res.msg);
          const store = useStore();
          const userinfo = store.getUserStoreinfo;
          userinfo.city = this.city;
          store.setUserinfo(userinfo);
        } else {
          showToast(res.msg);
        }
      });
      this.areashow = false;
    },

    formatDate(date) {
      const timestamp = Date.parse(date);
      const dateObject = new Date(timestamp);
      const year = dateObject.getFullYear();
      const month = (dateObject.getMonth() + 1).toString().padStart(2, "0");
      const day = dateObject.getDate().toString().padStart(2, "0");
      const formattedDate = `${year}-${month}-${day}`;
      return formattedDate;
    },

    backlink() {
      this.$router.back();
    },
    changedescription() {
      this.$router.push("changedescription");
    },
    changenickname() {
      this.$router.push("changenickname");
    },
  },
  mounted() {
    this.inituserinfo();
  },
};
</script>

<style scoped>
.app {
  background-color: #f5f3f3;
  min-height: 100vh;
}
.smooth-curve {
  width: 100%;
  height: 225px;
  background-image: url("../../assets/icons/user/mybackimg.svg");
  background-position: bottom center;
  background-repeat: no-repeat;
  position: relative;
}
.avatar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 50%;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recommend-teacher-box {
  width: 100%;
  margin: 0 auto;
}

.recommend-teacher-content {
  width: 100%;
  background-color: white;
}
.recommend-teacher-content .van-cell-group--inset {
  border-top-left-radius: 25px !important;
  border-top-right-radius: 25px !important;
  margin: -35px auto 0 auto !important;
}
.recommend-teacher-content1 .van-cell-group--inset {
  margin: 20px auto 0 auto !important;
}
.two-button-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 80%;
}
.description :deep(.van-cell__value) {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-all !important;
}
</style>